<style lang='less'>
</style>
<template>
  <div class="search-list-vue frame-page h-panel">
    <div class="h-panel-bar">
      <span class="h-panel-title">查询列表</span>
      <div class="h-panel-right"><Search placeholder="查询" v-width="400" v-model="params.keyword" @search="getData(true)" showSearchButton></Search></div>
    </div>
    <div class="h-panel-body">
      <div>
        <p>
          <Button color="blue" icon="h-icon-plus" @click="add">新增</Button>          
        </p>
        <Table :datas="datas" :height="400" @sort="triggerSort" :loading="loading">
          <TableItem title="序号" prop="id" :sort="true" :width="80"></TableItem>
          <TableItem title="名称" prop="title" :width="150"></TableItem>
<TableItem title="状态" :width="150">
              <template slot-scope="{data}">
                <h-switch v-model="data.status" :small="true" @input="toggleStatus(data)">
                  <span slot="open" class="h-icon-check"></span>
                  <span slot="close" class="h-icon-close"></span>
                </h-switch>
              </template>
            </TableItem>
<TableItem title="商圈" :width="150">
              <template slot-scope="{data}">
                <span>{{data.market?data.market.title:''}}</span>
              </template>
            </TableItem>
<TableItem title="分类" :width="150">
              <template slot-scope="{data}">
                <span>{{data.cat?data.cat.title:''}}</span>
              </template>
            </TableItem>
<TableItem title="图片" :width="150">
            <template slot-scope="{data}">
              <Avatar :src="data.pic" shape="square" noInfo></Avatar>
            </template>
          </TableItem>
<TableItem title="平台(0跳站内)" :width="150">
              <template slot-scope="{data}">
                <span>{{data.platform?data.platform.title:''}}</span>
              </template>
            </TableItem>
          <TableItem title="操作" align="center" :width="160" fixed="right">
            <template slot-scope="{data}">
              <button class="h-btn h-btn-s h-btn-blue" @click="edit(data)"><i class="h-icon-edit"></i></button>
              <Poptip content="确认删除?" @confirm="remove(datas, data)"><button class="h-btn h-btn-s h-btn-red"><i class="h-icon-trash"></i></button>
              </Poptip>
            </template>
          </TableItem>
          <div slot="empty">暂无数据</div>
        </Table>
        <Pagination v-if="pagination.total>0" align="right" v-model="pagination" @change="changePage"/>
      </div>
    </div>
  </div>
</template>
<script>
import Form from './form';

export default {
  data() {
    return {
      datas: [{}, {}, {}],
      loading: true,
      pagination: {
        page: 1,
        size: 20,
        total: 0
      },
      params: {
        keyword: null,
        sortProp: null,
        sortType: null
      }
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    params() {
      this.getData(true);
    }
  },
  methods: {
    changePage(page) {
      console.log(page);
      this.page = page.cur;
      this.size = page.size;
      this.getData();
    },
    triggerSort(data) {
      this.params.sortProp = data.prop;
      this.params.sortType = data.type.toUpperCase();
      this.getData(true);
    },
    init() {
      this.getData();
    },
    toggleStatus(data){
      R.ads.store({status:data.status?1:0,id:data.id}).then(resp => {
          if(resp.code==200){
            this.$Message.success(resp.message);
          }else{
            this.getData();
            this.$Message.warn(resp.message);
          }          
      });      
    },
    openModal(item={},title='新增'){
      this.$Modal({
        title:title,
        hasCloseIcon:true,
        hasDivider:true,
        width:800,
        component: {
          vue: Form,
          datas: { params: item } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success: (modal) => {
            this.getData();
          }
        }
      });
    },
    edit(data){
      let item = Object.assign({},data);
      if(item.hasOwnProperty('tags')){
        if(!item.tags){
          item.tags = [];
        }else{
          item.tags = item.tags.split(',').filter(item=>{return item!='';});
        }        
      }
      this.openModal(item,'编辑');
    },
    add(){
      this.openModal({});
    },
    remove(datas, data) {
      datas.splice(datas.indexOf(data), 1);
      R.ads.delete({id:data.id}).then((resp)=>{
        this.$Message.success('删除成功');
      });      
    },
    getData(reload = false) {
      if (reload) {
        this.pagination.page = 1;
      }
      this.loading = true;    
      let size = this.pagination.size;
      let page = this.pagination.page; 
      let param = Object.assign({size,page},this.params); 
      R.ads.index(param).then(resp => {
        this.loading = false;
        this.datas = resp.data.list;
        this.pagination = resp.data.pagination;
      });      
    }
  },
  computed: {

  }
};
</script>
